<template>
	<view class="box">
		<view class="title">
			举报详情信息
		</view>
		<view class="conBox">
			<view class="conTitle">进度概况</view>
			<view class="icon-Box">
				<view class="iconBox" v-if="dataForm.reportStatus != 5">
					<img class="myimg1" src="@/static/home/icon8.png" />
					<img class="myimg2" src="@/static/home/line.png" />
					<img class="myimg1" src="@/static/home/icon8.png" v-if="dataForm.reportStatus >= 2" />
					<view class="num" v-else>2</view>
					<img class="myimg2" src="@/static/home/line.png" />
					<img class="myimg1" src="@/static/home/icon8.png" v-if="dataForm.reportStatus >= 3" />
					<view class="num" v-else>3</view>
					<img class="myimg2" src="@/static/home/line.png" />
					<img class="myimg1" src="@/static/home/icon8.png" v-if="dataForm.reportStatus >= 4" />
					<view class="num" v-else>4</view>
				</view>
				<view class="iconBox" v-if="dataForm.reportStatus == 5">
					<img class="myimg1" src="@/static/home/icon8.png" />
					<img class="myimg2" src="@/static/home/line.png" />
					<img class="myimg1" src="@/static/home/icon8.png"/>
				</view>
			</view>
			
			<view class="bigBox" v-if="dataForm.reportStatus != 5">
				<view class="textBox">
					<view class="status ttt">已提交</view>
					<view class="time">{{dataForm.submitTime.split(' ')[0]}}</view>
					<view class="time">{{dataForm.submitTime.split(' ')[1]}}</view>
				</view>
				<view class="textBox">
					<view class="status" :class="dataForm.reportStatus >=2?'ttt':''">已接收</view>
					<view class="time">{{dataForm.reportStatus >=2? dataForm.acceptTime.split(' ')[0]:''}}</view>
					<view class="time">{{dataForm.reportStatus >=2? dataForm.acceptTime.split(' ')[1]:''}}</view>
				</view>
				<view class="textBox">
					<view class="status" :class="dataForm.reportStatus >=3?'ttt':''">办理中</view>
					<view class="time">{{dataForm.reportStatus >=3? dataForm.rectifyTime.split(' ')[0]:''}}</view>
					<view class="time">{{dataForm.reportStatus >=3? dataForm.rectifyTime.split(' ')[1]:''}}</view>
				</view>
				<view class="textBox">
					<view class="status" :class="dataForm.reportStatus >=4?'ttt':''">已完结</view>
					<view class="time">{{dataForm.reportStatus >=4? dataForm.finishTime.split(' ')[0]:''}}</view>
					<view class="time">{{dataForm.reportStatus >=4? dataForm.finishTime.split(' ')[1]:''}}</view>
				</view>
				
			</view>
			<view class="bigBox bigBox-center" v-if="dataForm.reportStatus == 5">
				<view class="textBox">
					<view class="status ttt">已提交</view>
					<view class="time">{{dataForm.submitTime.split(' ')[0]}}</view>
					<view class="time">{{dataForm.submitTime.split(' ')[1]}}</view>
				</view>
				<view class="textBox">
					<view class="status ttt">已驳回</view>
					<view class="time">{{dataForm.refuseTime.split(' ')[0]}}</view>
					<view class="time">{{dataForm.refuseTime.split(' ')[1]}}</view>
				</view>
				
			</view>
			
			<view class="myline"> </view>
			
			<view class="bottom-box">
				<view class="mytitle">举报信息</view>
				<view class="list">
					<view class="left">接收编号</view>
					<view class="right">{{dataForm.acceptCode}}</view>
				</view>
				<view class="list">
					<view class="left">被举报单位</view>
					<view class="right">{{dataForm.unitName}}</view>
				</view>
				<view class="list">
					<view class="left">问题所在地</view>
					<view class="right">{{dataForm.address}}</view>
				</view>
				<view class="list">
					<view class="left">接收单位</view>
					<view class="right">{{dataForm.acceptUnit}}</view>
				</view>
				<view class="list">
					<view class="left">举报内容</view>
					<view class="right">{{dataForm.reportContent}}</view>
				</view>
			</view>
			<view class="myline" v-if="dataForm.reportStatus == 4"> </view>
			
			<view class="bottom-box" v-if="dataForm.reportStatus == 4">
				<view class="mytitle">整改信息</view>
				<view class="list">
					<view class="left">整改内容</view>
					<view class="right">{{dataForm.rectifyContent}}</view>
				</view>
				<view class="imgBox" v-if="dataForm.rectifyImgs">
					<view class="top">整改后照片</view>
					<view class="bottom">
						<image v-for="item in dataForm.rectifyImgs.split(',')" :src="item" @click="previewImage(item)"></image>
					</view>
				</view>
				<view class="list">
					<view class="left">整改人</view>
					<view class="right">{{dataForm.rectifyUserName}}</view>
				</view>
				<view class="list">
					<view class="left">整改完成时间</view>
					<view class="right">{{dataForm.finishTime}}</view>
				</view>
				
			</view>
			<view class="myline" v-if="dataForm.reportStatus == 5"> </view>
			
			<view class="bottom-box" v-if="dataForm.reportStatus == 5">
				<view class="mytitle">驳回信息</view>
				<view class="list">
					<view class="left">驳回原因</view>
					<view class="right">{{dataForm.refuseReason}}</view>
				</view>
				<view class="list">
					<view class="left">操作人</view>
					<view class="right">{{dataForm.alloceUserName}}</view>
				</view>
				<view class="list">
					<view class="left">操作时间</view>
					<view class="right">{{dataForm.alloceTime}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					id:'',
					dataForm:{
						submitTime:'',
						acceptCode:'',
						unitName:'',
						address:'',
						acceptUnit:'',
						reportContent:'',
						reportStatus: '',//举报状态 举报状态 1、已提交 2、已接收 3、处理中 4、已完结 5、驳回
						acceptTime:'',
						rectifyTime:'',
						finishTime:'',
						rectifyContent:'',
						rectifyUserName:'',
						finishTime:'',
						rectifyImgs:'',
						refuseReason:'',
						refuseTime:''
					}
					
				};
			},
			onLoad(options) {
				this.id = options.id
				this.initData()
			},
			
			methods: {
				initData(){
					uni.$u.http.get(`/manage/api/reportRectify/getDetail/${this.id}`).then(res => {
						if(res.code == 0){
							this.dataForm = res.data
						}
					})
				},
				//预览图片
				previewImage: function(e) {
					uni.previewImage({
						current: e,
						urls: this.dataForm.rectifyImgs.split(',')
					});
				},
			}
		};
	
</script>

<style lang="less">
	page{
		background-color: rgba(245, 246, 247, 1);
	}
	.box{
		padding-bottom: 40rpx;
		.title{
			padding:40rpx 32rpx;
			height: 332rpx;
			background: linear-gradient(180deg, rgba(48, 102, 249, 1) 0%, rgba(64, 104, 214, 1) 100%);
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
		.conBox{
			margin: 0 32rpx;
			margin-top: -290rpx;
			padding: 32rpx;
			background: rgba(255, 255, 255, 1);
			border-radius: 16rpx;
			
			.conTitle{
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 44rpx;
			}
			.icon-Box{
				display: flex;
				justify-content: center;
				margin-bottom: 24rpx;
			}
			.iconBox{
				display: flex;
				align-items: center;
				margin:0 auto;
				.myimg1{
					width: 48rpx;
					height: 48rpx;
				}
				.myimg2{
					width: 84rpx;
					height: 1px;
					margin:0 12rpx;
				}
				.num{
					width: 48rpx;
					height: 48rpx;
					background: url('@/static/home/icon10.png') no-repeat;
					background-size: cover;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
				}
			}
			.bigBox{
				margin-bottom: 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.textBox{
					width: 152rpx;
					height: 112rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.status{
						font-size: 30rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 12rpx;
					}
					.ttt{
						color: rgba(45, 166, 65, 1);
					}
					.time{
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(153, 153, 153, 1);
					}
				}
			}
			.bigBox-center{
				justify-content: center;
			}
		}
		.myline{
			margin-top: 40rpx;
			height: 2rpx;
			width: 100%;
			border-bottom: 2rpx dashed rgba(228, 228, 228, 1);
		}
		.bottom-box{
			margin-top: 40rpx;
			.mytitle{
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				margin-bottom: 44rpx;
			}
			.list{
				display: flex;
				justify-content: space-between;
				margin-bottom: 32rpx;
				.left{
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
				.right{
					width: 55vw;
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
			}
			.imgBox{
				margin-bottom: 22rpx;
				
				.top{
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
				.bottom{
					display: flex;
					flex-wrap: wrap;
					margin-top: 16rpx;
					image{
						width: 200rpx;
						height: 200rpx;
						margin-right: 10rpx;
						margin-bottom: 10rpx;
					}
					image:nth-child(3n){
						margin-right: 0;
					}
				}
			}
		}
	
	}
</style>